<template>
    <div>
        <div class="sighttitle">
            <span>景点管理</span>
            <el-button class="addsight" type="primary" @click="addSight()">添加景点</el-button>
        </div>
        <div class="searchsight">
            <el-input v-model="sightname" placeholder="输入关键字搜索" style="width: 300px;">
            </el-input>
            <el-button type="primary" @click="searchSight(sightname)">搜索</el-button>
        </div>
        <el-button type="primary" @click=" getuserdata()">全部景点</el-button>
        <div>
            <el-table :data="sights.slice((currentPage - 1) * pageSize, currentPage * pageSize)">
                <el-table-column prop="sid" label="景点编号"></el-table-column>
                <el-table-column prop="name" label="景点名"></el-table-column>
                <el-table-column label="图片缩略图">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.img" fit="contain" style="width: 120px; height: 120px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="景点内容"></el-table-column>
                <el-table-column prop="address" label="景点地址"></el-table-column>
                <el-table-column prop="ishot" label="推广状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.ishot == 0">未推广</span>
                        <span v-if="scope.row.ishot == 1">推广</span>
                    </template>
                </el-table-column>
                <el-table-column prop="longitude" label="经度"></el-table-column>
                <el-table-column prop="latitude" label="纬度"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: row;">
                            <el-button v-if="scope.row.ishot == 0" @click="putEdit(scope.row.sid)"
                                style="width: 90px;">推广</el-button>
                            <el-button v-else-if="scope.row.ishot == 1" type="danger" @click="handleEdit(scope.row.sid)"
                                style="width: 90px;">取消</el-button>
                            <el-button @click="handleDelete(scope.row.sid)">移除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog width="38%" title="添加景点" :visible.sync="sightVisible" append-to-body>
                <el-form :model="form">
                    <el-form-item label="景点名:" :label-width="formLabelWidth">
                        <el-input v-model="form.name" style="width:300px" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="景点图片:" :label-width="formLabelWidth">
                        <el-input v-model="form.img" style="width:300px" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="景点内容:" :label-width="formLabelWidth">
                        <el-input v-model="form.content" style="width:300px" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="景点地址:" :label-width="formLabelWidth">
                        <el-input v-model="form.address" style="width:300px" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="景点经度:" :label-width="formLabelWidth">
                        <el-input v-model="form.longitude" style="width:300px" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="景点纬度:" :label-width="formLabelWidth">
                        <el-input v-model="form.latitude" style="width:300px" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="addSights()">添加</el-button>
            </el-dialog>
            <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page.sync="currentPage">
            </el-pagination>
        </div>
    </div>
</template>
  
<script>
export default {
    name: "five",
    data() {
        return {
            pageSize: 5, // 每页显示数量
            currentPage: 1, // 当前页数
            total: 50, // 总数据量
            sights: [],
            sightVisible: false,
            form: {
                name: '',
                img: '',
                content: '',
                address: '',
                longitude: '',
                latitude: ''
            },
            sightname: [],
        };
    },
    methods: {
        //获取景点信息
        getuserdata() {
            fetch(`http://localhost:3000/sights`, {
                method: 'GET'
            })
                .then(res => res.text())
                .then(res => {
                    // console.log(res);
                    this.sights = JSON.parse(res)
                });
        },
        //删除景点
        handleDelete(sid) {
            fetch(`http://localhost:3000/deleteSights/${sid}`, {
                method: 'DELETE'
            }).then(() => {
                this.getuserdata();
            })
            this.$message.success('删除成功')
            // location.reload();
        },
        //推广景点
        putEdit(sid) {
            fetch(`http://localhost:3000/hotSights/${sid}`, {
                method: 'post'
            }).then(() => {
                this.getuserdata();
            })
            this.$message.success('推广成功')
            // location.reload();
        },
        //取消推广
        handleEdit(sid) {
            fetch(`http://localhost:3000/handleSights/${sid}`, {
                method: 'post'
            }).then(() => {
                this.getuserdata();
            })
            this.$message.success('取消推广')
            // location.reload();
        },
        //新增景点
        addSight() {
            this.sightVisible = true;
        },
        addSights() {
            this.sightVisible = false;
            fetch('http://localhost:3000/addSights', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    name: `${this.form.name}`,
                    img: `${this.form.img}`,
                    content: `${this.form.content}`,
                    address: `${this.form.address}`,
                    longitude: `${this.form.longitude}`,
                    latitude: `${this.form.latitude}`,
                })
            }).then(() => {
                this.getuserdata();
            });
            this.$message.success('新增成功 ')
            // location.reload();
        },
        //查找数据
        searchSight(sightname) {
            fetch(`http://localhost:3000/sights/${sightname}`, {
                method: 'GET'
            })
                .then(res => res.text())
                .then(res => {
                    this.sights = JSON.parse(res)
                });
        },
    },
    mounted() {
        this.getuserdata();
        // setInterval(() => {
        //     this.getuserdata();
        // }, 1000);
    },
};
</script>
<style>
.sighttitle {
    width: 500px;
    height: 60px;
    font-size: 30px;
    font-weight: bold;
    color: black;
    margin-left: 1%;
    margin-top: 5%;
}

.addsight {
    margin-left: 10%;
}

.searchsight {
    margin-left: 70%;
}

.btns {
    margin-top: 10px;
    margin-left: 0;
}
</style>